<!--  -->
<template>
  <div class="comment">
      <p class="comment-title">
          <span>评论</span>
          <span>({{dataLength}})</span>
      </p>
      <div class="commentMyinfo">
        <img :src="myuser.user_img" alt="" v-if="myuser"/>
        <img src="@/assets/default_img.jpg" alt="" v-else/>
        <input v-model="comcontent" ref="Postipt" type="text" placeholder="说点什么吧" />
        <button @click="cmmentPublish">发布</button>
      </div>
  </div>
</template>

<script >
export default {
props:['dataLength'],
 components: {},
  data () {
    return {
        myuser:null,
        comcontent:"",
    };
  },
  methods:{
    async myUserinfo(){
    const res=await this.$http.get('/user/'+localStorage.getItem('id'))
    this.myuser=res.data[0]
  },
  cmmentPublish(){
    if(!this.myuser&&!localStorage.getItem('token')&&!localStorage.get('id')){
      this.$msg.fail('请先登录')
      return
    }
    this.$emit('Postcomment',this.comcontent)
    this.comcontent="";
  },
  focusIpt(){
    this.$refs.Postipt.focus()
  }
},
  mounted(){
    if(localStorage.getItem('token')){
      this.myUserinfo();
    }
  }

}

</script>
<style>
.comment{
  padding: 8.333vw 2.778vw 0 2.7778vw;
  background-color: white;
}
.comment .comment-title span:nth-child(2){
    color: #aaa;
    margin-left: 10px;
}
.commentMyinfo{
  padding: 2.778vw 0;
  display: flex;
}
.commentMyinfo img{
  height:7.944vw;
  width: 7.944vw;
  border-radius: 50%;
}
.commentMyinfo input{
  outline: none;
  border:0 ;
  background-color: #f4f4f4;
  border-radius: 13px;
  font-size: 12px;
  padding: 0 20px 0 15px;
  margin-left:10px;
}
.commentMyinfo button{
  outline: none;
  border: 0;
  border-radius:12px;
  background: #fb7299;
  color: white;
  font-size: 12px;
  padding: 0 15px;

}
</style>